<template>
  <scroll-view class="article" :style="[mainStyle]" scroll-y @scroll='scroll'>
    <view class="jh-row jh-flex">
      <view class="article-main">
        <block v-for="(i,index) in textList" :key='index'>
          <image :style="{width: textwidth + 'px'}" style="display: block;" :src="ossDomain + '/article/healthy-diet/article-text'+i+'.png'" mode="widthFix"></image>
        </block>
      </view>
      <view class="article-imgList">
        <block v-for="(i,index) in imgList" :key='index'>
          <image class="article-imgList-item margin-b5" :src="ossDomain + '/article/healthy-diet/article-img'+i+'.png'" mode="aspectFill"></image>
        </block>
        <block v-for="(i,index) in videoList" :key='index'>
          <video
            :id="'video'+index"
            :ref="'video'+index"
            class="article-imgList-item margin-b5"
            :src="i"
            @play='play($event, index)'
            @timeupdate='timeupdate($event, index)'
            @pause='pause($event, index)'
            @ended='ended($event, index)'
          ></video>
        </block>
      </view>
    </view>
    <callService type='9'></callService>
    <video
      id='picture'
      ref='picture'
      class="article-fixed"
      :style="{right: !videoInView && video.inPlay ? '30px' : '-210px'}"
      :muted='muted'
      :controls='false'
      show-fullscreen-btn
      @play='picturePlay'
      @timeupdate='pictureTimeupdate'
      @pause='picturePause'
      :src="videoList[video.index]">
    </video>
    <cover-image @tap='closePicture' :style="{right: !videoInView && video.inPlay ? '30px' : '-210px'}" class="picture-close" :src="ossDomain + '/icon-close.png'"></cover-image>
  </scroll-view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import callService from '@/components/call-service/call-service'
  export default {
    components: {
      callService
    },
    props: {
      mainStyle: {
        type: Object,
        default: ''
      }
    },
    computed: {
      textwidth () {
        let num = parseInt(this.mainStyle.width) - 210
        return num > 441 ? 441 : num
      },
      viewHeight () {
        return parseInt(this.mainStyle.height)
      }
    },
    data() {
      return {
        ossDomain: uni.ossDomain,
        textList: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
        imgList: [1,2,3,4,5],
        videoList: [
          '/static/video/190204084208765161.mp4'
        ],
        video: {
          index: '',
          context: null,
          inPlay: false,
          currentTime: 0,
          top: 0,
        },
        picture: {
          context: null,
          inPlay: false,
          currentTime: 0
        },
        videoInView: true,
        muted: true
      }
    },
    mounted() {
      this.picture.context = uni.createVideoContext('picture')
    },
    methods: {
      play (e, i) {
        // console.log(e);
        let videoContext = uni.createVideoContext('video'+i)
        let top = 25 + (120 + 5) * 5 + (120 + 5) * i
        if (this.video?.context) {
          if (i != this.video.index) {
            this.video.context.stop()
            this.videoInView = true
            this.video = {
              index: i,
              context: videoContext,
              inPlay: true,
              top,
              currentTime: 0
            }
            this.muted = false
          } else {
            this.video.inPlay = true
          }
        } else {
          this.video = {
            index: i,
            context: videoContext,
            inPlay: true,
            top,
            currentTime: 0
          }
        }
        setTimeout(()=>{
          this.picture.context.play()
          this.muted = true
        },0)
      },
      pause (e, i) {
        if (this.video?.context) {
          if (i == this.video.index) {
            this.picture.context.pause()
            this.video.inPlay = false
          }
        }
      },
      ended (e, i) {
        if (this.video?.context) {
          if (i == this.video.index) {
            this.picture.context.stop()
            this.video.inPlay = false
          }
        }
      },
      picturePlay () {
        this.picture.inPlay = true
        this.picture.context.seek(this.video.currentTime + 1)
        if (!this.videoInView) {
          this.video.context.play()
        }
      },
      picturePause () {
        this.picture.inPlay = false
        if (!this.videoInView) {
          this.video.context.pause()
        }
      },
      pictureTimeupdate (e) {
        let currentTime = Number(e.detail.currentTime)
        this.picture.currentTime = e.detail.currentTime
      },
      timeupdate (e) {
        let currentTime = Number(e.detail.currentTime)
        this.video.currentTime = e.detail.currentTime
        if (Math.abs(this.picture.currentTime - currentTime) > 2) {
          this.picture.context.seek(this.video.currentTime + 1)
          console.log('变速了');
        }
        if (!this.videoInView && !this.picture.inPlay) {
          this.picture.context.play()
        }
        console.log('video:',this.video.currentTime);
      },
      closePicture () {
        this.video.context.pause()
        this.picture.context.pause()
      },
      scroll (e) {
        if (this.video?.context) {
          this.videoInView = e.detail.scrollTop < this.video.top + 120 && e.detail.scrollTop > this.video.top - this.viewHeight
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .article{
    position: relative;
    &-main{
      margin-top: -40px;
    }
    &-imgList{
      padding-top: 30px;
      &-item{
        width: 210px;
        height: 120px;
      }
    }
    
    &-fixed {
      position: fixed;
      // position: absolute;
      top: 49px;
      right: -210px;
      width: 210px;
      height: 120px;
    }
  }
  .picture-close{
    position: fixed;
    // position: absolute;
    top: 49px;
    right: -210px;
    width: 20px;
    height: 20px;
  }
</style>
